<script setup lang="ts">
import {getCurrentInstance, ref} from "vue";
import type {LoginReq} from "@/interfaces/user";
import {useLoginApi} from "@/services/api";
import {useStore} from "vuex";
import {onShow} from "@dcloudio/uni-app";


const isLogin = ref<boolean>(false)
const store = useStore()
const onClick = async () => {
  const {data:res} = await useLoginApi(model.value)
  if(!res || !res.target){
    await uni.showToast({
      title:'登录成功',
      position:"center"
    })
    await store.dispatch("auth/setToken",res.token)
    await store.dispatch("auth/setUsername",res.username)
    await store.dispatch("auth/setUserId",res.id)
    await store.dispatch("auth/setIsLogin",true)
    isLogin.value = !isLogin.value
    await uni.redirectTo({
      url:'/pages/index/index'
    })
  }
}
const model = ref<LoginReq>({
  username:'',
  password:''
})
onShow(()=>{
  const {refs} = getCurrentInstance()
  store.dispatch("auth/setUToast", refs.uToast.show)
})
</script>

<template>
  <view>
    <u-toast ref="uToast"></u-toast>
    <view class="content">
      <view class="form">
        <view class="icon">
          <up-avatar icon="account" size="96" fontSize="64" shape="circle"></up-avatar>
        </view>
        <view class="form_item">
          <u--form
              :model="model"
              ref="form"
              labelPosition="top"

          >
            <u-form-item
                label="用户名"
                prop="username"
                borderBottom
                ref="username"
                labelWidth="90"
            >
              <u--input
                  v-model="model.username"
              ></u--input>
            </u-form-item>
            <u-form-item
                label="密码"
                prop="password"
                borderBottom
                ref="password"
                labelWidth="90"
            >
              <u--input
                  v-model="model.password" type="password"
              ></u--input>
            </u-form-item>
          </u--form>
          <view class="submit_button">
            <u-button type="primary" text="登录" @click="onClick"></u-button>
          </view>

        </view>
      </view>
      <view class="glass"></view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.content {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;

  &:before {
    content: "";
    width: 100vw;
    height: 100vh;
    position: absolute;
    background-color: rgba(221, 82, 77, 0.7);
    clip-path: polygon(0 0, 0 100%, 100% 0);
    transition: all 1.8s ease-in-out;
    animation-name: top-move;
    animation-duration: 2s;
    animation-delay: 0.2s;
    animation-fill-mode: forwards;
    top: 0;
    z-index: -2;
  }

  &:after {
    content: "";
    width: 100vw;
    height: 100vh;
    position: absolute;
    background-color: rgba(0, 122, 255, 0.7);
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
    transition: all 1.8s ease-in-out;
    animation-name: bottom-move;
    animation-duration: 2s;
    animation-delay: 0.2s;
    animation-fill-mode: forwards;
    bottom: 0;
    z-index: -2;
  }

  .glass {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100vh;
    backdrop-filter: blur(10px);
    z-index: -1;
  }

  .form {
    padding-top: 30%;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:24rpx;
    .icon{
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .form_item{
      background-color: rgba(0,0,0,0.3);
      border-radius: 36rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 24rpx;
      width: 60%;
      gap: 16rpx;
      .submit_button{
        width: 74%;
      }
    }
  }
}

@keyframes top-move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-25%, -25%);
  }
}

@keyframes bottom-move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(25%, 25%);
  }
}
</style>